<template>
    <div>
        <h3>- async 函数 是 Generator 函数的语法糖；将 Generator 函数的星号（*）替换成async，将yield替换成await</h3>
        <ul>
            async函数对 Generator 函数的改进：
            <li>async函数自带执行器</li>
            <li>更好的语义，async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果</li>
            <li>yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）</li>
            <li>async函数的返回值是 Promise 对象，可以用then方法指定下一步的操作</li>
        </ul>
        <p>当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句</p>
        <p>async 函数有多种使用形式：函数声明、函数表达式、对象的方法、Class 的方法、箭头函数</p>
        <h3>- 语法</h3>
        <p>async函数返回一个 Promise 对象，函数内部<b>return语句</b>返回的值，会成为<b>then方法回调函数的参数，而async函数内部抛出错误 会被catch方法回调函数接收到</b></p>
        <p>！！只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数 </p>
        <p>await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值</p>
        <p>await命令后面的 Promise 对象如果变为reject状态，则reject的参数会被catch方法的回调函数接收到；任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行</p>
        <p>希望即使前一个异步操作失败，也不要中断后面的异步操作：1、将第一个await放在try...catch结构里面 2、await后面的 Promise 对象再跟一个catch方法，处理前面可能出现的错误：</p>
        <pre>
    <code>
        try {
            await Promise.reject('出错了');
        } catch(e) {
        }
        return await Promise.resolve('hello world');
        //或者
        await Promise.reject('出错了')
            .catch(e => console.log(e));
        return await Promise.resolve('hello world');
    </code>
        </pre>
        <ul>
            注意点：
            <li>await命令后面的Promise对象，运行结果可能是rejected，所以最好把await命令放在try...catch代码块中</li>
            <li>多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发 可以使用Promise.all() 或者 <code>let fooPromise = getFoo(); let barPromise = getBar(); let foo = await fooPromise; let bar = await barPromise;</code></li>
            <li>await命令只能用在async函数之中 循环最好使用 for</li>
            <li>async 函数可以保留运行堆栈</li>
        </ul>
        <h3>- async 函数的实现原理 就是将 Generator 函数和自动执行器，包装在一个函数里</h3>
        <h3>- 顶层 await</h3>
        <p>有一个语法提案，允许在模块的顶层独立使用await命令。这个提案的目的，是借用await解决模块异步加载的问题。</p>
    </div>
</template>

<script>
export default {
    
}
</script>

<style scoped>

</style>